<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common :: common_header"/>
<style>
    .label-status {
        display: inline;
        padding: .2em .6em .2em;
        font-size: 100%;
        line-height: 2;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em
    }
</style>
<body>
    <div data-toggle="topjui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true,singleSelect:true,width:'15%',border:false,bodyCls:'border_right'" style="margin-top: 5px;">
            <table data-toggle="topjui-treegrid" id="clientList" data-options="id:'clientList',
                                                                    idField:'id',
                                                                    treeField:'name',
                                                                    url:'../../menu/client/tree/list',
                                                                    fitColumns:true,
                                                                    singleSelect:true,
                                                                    childGrid:{
                                                                        param:'clientId:id',
                                                                        grid:[
                                                                            {type:'treegrid',id:'menuList'},
                                                                        ]
                                                                    },
                                                                    onBeforeSelect:function(row){clientTreeClick(row)}">
                <thead>
                    <tr>
                        <th data-options="field:'name',title:'应用系统',width:150"></th>
                    </tr>
                </thead>
            </table>
        </div>
        <div data-options="region:'center',iconCls:'icon-reload',split:true,border:false">
            <div data-toggle="topjui-layout" data-options="fit:true">
                <div data-options="region:'center',iconCls:'fa fa-table',fit:false,split:true,border:false,bodyCls:'border_left'">
                    <div data-toggle="topjui-tabs" data-options="border:false">
                        <div title="菜单列表" data-options="iconCls:'fa fa-table'">
                            <table data-toggle="topjui-treegrid" data-options="id:'menuList',
                                                                            idField:'id',
                                                                            treeField:'name',
                                                                            url:'../../menu/list/-1/2',
                                                                            expandUrl:'../../menu/list/{id}/2',
                                                                            fitColumns:true,
                                                                            emptyMsg:'暂无数据<br/><span style=\'color:green;\'>（温馨提示：只有先选中左侧树形导航中的某个应用，方可加载对应的菜单数据哦）</span>',
                                                                            singleSelect:true,selectOnCheck:false,checkOnSelect:false,
                                                                            rowStyler:function(row){
                                                                                if(row.status == 'DISABLE'){
                                                                                    return 'background-color:#FFD2D2;';
                                                                                }
                                                                            }" id="menuList">
                                <thead>
                                    <tr>
                                        <th data-options="field:'',title:'复选框',checkbox:true"></th>
                                        <th data-options="field:'id',title:'主键',width:100"></th>
                                        <th data-options="field:'name',title:'菜单名称',width:100"></th>
                                        <th data-options="field:'status',title:'状态',width:50,
                                        formatter:function(value,row,index){
                                            if (value == 'ENABLE') {
                                                return '<span class=\'label-status\' style=\'background-color:#449d44;\'>已启用</span>';
                                            } else if (value == 'DISABLE') {
                                                return '<span class=\'label-status\' style=\'background-color:#ec971f;\'>已禁用</span>';
                                            }
                                        }"></th>
                                        <!--<th data-options="field:'clientId',title:'所属应用',width:150"></th>-->
                                        <th data-options="field:'code',title:'菜单编码',width:100"></th>
                                        <th data-options="field:'url',title:'菜单URL',width:130"></th>
                                        <th data-options="field:'icon',title:'菜单图标',width:80"></th>
                                        <th data-options="field:'operate',title:'操作',formatter:operateFormatter,width:60"></th>
                                    </tr>
                                </thead>
                            </table>

                            <div id="menuList-toolbar" class="topjui-toolbar" data-options="id:'menuList-toolbar',grid:{type:'treegrid', id:'menuList'}">
                                <!--
                                    //这种是框架原本支持的写法，但不够灵活
                                    <a href="javascript:void(0)" data-toggle="topjui-menubutton" data-options="iconCls: 'fa fa-plus',btnCls: 'topjui-btn-green',
                                        method:'openDialog',
                                        extend:'#menuList-toolbar',
                                        parentGrid:{
                                           type:'treegrid',
                                           id:'clientList',
                                           param:'clientId:id',
                                           unselectedMsg:'请先选择左侧树形导航中的应用'
                                        },
                                        dialog:{
                                           id:'menuAddDialog',
                                           href:'../../menu/view/add',
                                           height:450,
                                           buttonsGroup:[
                                               {text:'保存',url:'../../menu/-2',iconCls:'fa fa-plus',handler:'ajaxForm'}
                                           ]
                                       }">新增</a>
                                -->
                                <a href="javascript:void(0)"
                                   data-toggle="topjui-menubutton" data-options="onClick:addMenuView,iconCls: 'fa fa-plus',btnCls: 'topjui-btn-green'">新增</a>
                                <a href="javascript:void(0)"
                                   data-toggle="topjui-menubutton" data-options="onClick:menuEdit,iconCls: 'fa fa-pencil-square-o', btnCls: 'topjui-btn-blue'">修改</a>
                                <a href="javascript:void(0)"
                                   data-toggle="topjui-menubutton" data-options="onClick:batchDeleteMenu,btnCls:'topjui-btn-brown',iconCls:'fa fa-trash'">删除</a>
                                <!--<a href="javascript:void(0)" data-toggle="topjui-menubutton"
                                   data-options="btnCls:'topjui-btn-blue',iconCls:'fa fa-trash',extend:'#menuList-toolbar',method:'search'">查询</a>-->
                                <a href="javascript:void(0)" data-toggle="topjui-menubutton"
                                   data-options="onClick:expandAllMenuNode,btnCls:'topjui-btn-red',extend:'#menuList-toolbar',iconCls:'fa fa-trash'">展开全部</a>
                                <a href="javascript:void(0)" data-toggle="topjui-menubutton"
                                   data-options="onClick:collapseAllMenuNode,btnCls:'topjui-btn-red',extend:'#menuList-toolbar',iconCls:'fa fa-trash'">折叠全部</a>
                                <a href="javascript:void(0)" data-toggle="topjui-menubutton"
                                   data-options="btnCls:'topjui-btn-purple',method:'filter',extend:'#menuList-toolbar',iconCls:'fa fa-trash'">过滤</a>
                                <a href="javascript:void(0)" data-toggle="topjui-menubutton"
                                   data-options="btnCls:'topjui-btn-orange',method:'openTab',extend: '#menuList-toolbar',
                                            tab:{
                                                title:'这是新的Tab窗口',
                                                href:'http://www.baidu.com'
                                            }">打开Tab窗口</a>
                                <a href="javascript:void(0)" data-toggle="topjui-menubutton"
                                   data-options="method:'openWindow',extend: '#menuList-toolbar',btnCls:'topjui-btn-black',
                                            href:'http://www.baidu.com?roleId={id}'">打开新窗口</a>
                                <a href="javascript:void(0)"
                                   data-toggle="topjui-menubutton" data-options="iconCls: 'fa fa-plus',btnCls: 'topjui-btn-green',hasDownArrow:true,menu:'#moreSubMenu'">子菜单测试</a>

                                <!-- 自定义查询 -->
                                <form id="queryForm" class="search-box">
                                    <input type="text" name="name" data-toggle="topjui-textbox" data-options="id:'name',prompt:'菜单名称',width:150">
                                    <input type="text" name="status" data-toggle="topjui-combobox"
                                           data-options="id:'status',prompt:'状态',width:150,
                                                    data:[{
                                                        text: '启用',
                                                        value: '1'
                                                    },
                                                    {
                                                        text: '禁用',
                                                        value: '2'
                                                    }]">
                                    <input type="text" name="code" data-toggle="topjui-textbox" data-options="id:'code',prompt:'菜单编码',width:150">
                                    <a href="javascript:void(0)" data-toggle="topjui-menubutton"
                                       data-options="method:'query',
                                               iconCls:'fa fa-search',
                                               btnCls:'topjui-btn-blue',
                                               form:{id:'queryForm'},
                                               grid:{type:'treegrid','id':'menuList'}">查询</a>
                                </form>
                            </div>

                            <div id="moreSubMenu" class="topjui-toolbar">
                                <div class="menu-line" style="height: 70px;"></div>
                                <a href="javascript:void(0)"
                                   data-toggle="topjui-menubutton" data-options="onClick:menuEdit,iconCls:'fa fa-plus',">测试子菜单1</a>
                                <a href="javascript:void(0)"
                                   data-toggle="topjui-menubutton" data-options="onClick:batchDeleteMenu,iconCls:'fa fa-plus',">测试子菜单2</a>
                            </div>

                            <form method="post" id="menuEditDialog"></form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



<script th:inline="javascript">
    //TODO: 获取项目上下文路径，记得需要在<script>标签中加入  th:inline="javascript" 属性配置，才可正常解析
    /*<![CDATA[*/
    var contextPath = /*[[@{/}]]*/;
    /*]]>*/


    /**
     * 左侧应用tree节点单击事件
     */
    function clientTreeClick(row){
        if (row.id == -1) {
            //这里直接抛异常，就可以阻止一切代码的执行；目的是不让右侧表格进行数据加载刷新。这里如果返回 false，阻止不了右侧表格刷新，不知道是什么原因（如有知道解决办法的，请告知啊）
            throw "应用所属的分组 - 单击事件不处理，直接跳过。（注意：这里并非功能上的异常，是人为解决问题的一种变通方式）";
        }
    }

    /**
     * 新增菜单弹出框
     */
    function addMenuView(){
        var clientSelect = $("#clientList").treegrid("getSelected");
        if (clientSelect == undefined || clientSelect.length <= 0) {
            $.messager.alert("提示", "请先选择左侧树形导航中的一个应用", "messager-warning");
            return;
        }

        var $editDialog = $('#menuEditDialog');
        $editDialog.iDialog({
            title: '新增菜单',
            width: 880,
            height: 400,
            closed: false,
            cache: false,
            method: "get",
            href: contextPath + 'menu/view/add/' + clientSelect.id,
            modal: true,
            buttons: [{
                text: '保存',
                iconCls: 'fa fa-save',
                btnCls: 'topjui-btn-blue',
                handler: function () {
                    $('#menuEditDialog').iForm('submit', {
                        url: contextPath + "menu/-2",
                        success: function (data) {
                            var data = eval('(' + data + ')');
                            if (data.code == 200) {
                                $.iMessager.alert('提示', '新增成功', 'messager-success');
                                $('#menuList').treegrid('reload');
                                //tabMenuOprate(null,6);
                                $editDialog.iDialog('close');
                            } else {
                                $.iMessager.alert('提示', '系统错误，请稍后重试', 'messager-error');
                                $('#menuList').treegrid('reload');
                                $editDialog.iDialog('close');
                            }
                            $("body").append("<form method=\"post\" id=\"menuEditDialog\"></form>");
                        }
                    });
                }
            }, {
                text: '关闭',
                iconCls: 'fa fa-close',
                btnCls: 'topjui-btn-red',
                handler: function () {
                    $editDialog.iDialog('close');
                    $("body").append("<form method=\"post\" id=\"menuEditDialog\"></form>");
                }
            }]
        });
    }
    /**
     * 导航栏的编辑菜单事件
     */
    function menuEdit() {
        var menuCheckboxSelect = $("#menuList").treegrid("getChecked");
        if (menuCheckboxSelect == undefined || menuCheckboxSelect.length <= 0) {
            $.messager.alert("提示", "请选择一个菜单", "messager-warning");
            return;
        }
        if (menuCheckboxSelect.length > 1) {
            $.messager.alert("提示", "只能选择一个菜单", "messager-warning");
            return;
        }
        openEditDiag(menuCheckboxSelect[0].id);
    }

    /**
     * 操作一列的内容格式化
     */
    function operateFormatter(value, row, index) {
        var htmlstr = '<button class="layui-btn layui-btn-xs" onclick="openEditDiag(\'' + row.id + '\')">编辑</button>';
        htmlstr += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteMenu(\'' + row.id + '\')">删除</button>';
        return htmlstr;
    }

    /**
     * 弹出菜单编辑弹出框
     */
    function openEditDiag(id) {
        var $editDialog = $('#menuEditDialog');
        $editDialog.iDialog({
            title: '编辑数据',
            width: 880,
            height: 400,
            closed: false,
            cache: false,
            method: "put",
            href: contextPath + 'menu/' + id,
            modal: true,
            buttons: [{
                text: '保存',
                iconCls: 'fa fa-save',
                btnCls: 'topjui-btn-blue',
                handler: function () {
                    $('#menuEditDialog').iForm('submit', {
                        url: contextPath + "menu/" + id,
                        success: function (data) {
                            var data = eval('(' + data + ')');
                            if (data.code == 200) {
                                $.iMessager.alert('提示', '操作成功', 'messager-success');
                                $('#menuList').treegrid('reload');
                                //tabMenuOprate(null,6);
                                $editDialog.iDialog('close');
                            } else {
                                $.iMessager.alert('提示', '系统错误，请稍后重试', 'messager-error');
                                $('#menuList').treegrid('reload');
                                $editDialog.iDialog('close');
                            }
                            $("body").append("<form method=\"post\" id=\"menuEditDialog\"></form>");
                        }
                    });
                }
            }, {
                text: '关闭',
                iconCls: 'fa fa-close',
                btnCls: 'topjui-btn-red',
                handler: function () {
                    $editDialog.iDialog('close');
                    $("body").append("<form method=\"post\" id=\"menuEditDialog\"></form>");
                }
            }]
        });
    }

    /**
     * 批量删除
     */
    function batchDeleteMenu() {
        var menuCheckboxSelect = $("#menuList").treegrid("getChecked");
        if (menuCheckboxSelect == undefined || menuCheckboxSelect.length <= 0) {
            $.messager.alert("提示", "请选择一个菜单", "messager-warning");
            return;
        }
        var menuIdArr = [];
        for(var i = 0; i < menuCheckboxSelect.length; i++){
            menuIdArr.push(menuCheckboxSelect[i].id);
        }
        deleteMenu(menuIdArr.join(","));
    }
    /**
     * 删除菜单
     */
    function deleteMenu(id) {
        $.iMessager.confirm('提示', '确定要删除吗?<p style="color: red;margin-top: 8px;">请慎重操作，删除后可能会影响功能的正常使用！如若没有特殊需要，请勿轻易删除！</p>', function (r) {
            if (r) {
                $.ajax({
                    url: contextPath + "menu/batch", //路径
                    type: "post",
                    data: {
                        "menuId": id
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == 200) {
                            $.iMessager.alert('提示', '删除成功', 'messager-success');
                            $('#menuList').treegrid('reload');
                            //loadGrid();
                        } else {
                            $.iMessager.alert('提示', '系统错误，请稍后重试', 'messager-error');
                        }
                    }
                });
            }
        });
    }


    /**
     * 展开所有菜单节点
     */
    function expandAllMenuNode(){
        $("#menuList").treegrid("expandAll");
    }

    /**
     * 折叠所有菜单节点
     */
    function collapseAllMenuNode(){
        $("#menuList").treegrid("collapseAll");
    }
</script>
</body>
</html>